<template>
  <div>
    <div class="tw-mt-4 tw-flex tw-justify-between">
      <div class="tw-w-6/12">
        <el-input prefix-icon="el-icon-search" v-model="emName" :disabled="advanceVisible" v-on:keyup.native.enter="initEmployees"
                  clearable @clear="initEmployees" placeholder="根据姓名搜索" class="tw-w-3/5"
                  @input="search">
        </el-input>
        <el-button class="tw-ml-2" type="primary" @click="initEmployees" :disabled="advanceVisible">搜索</el-button>
        <el-button class="tw-ml-1" type="primary" @click="advanceVisible = !advanceVisible">
          <i :class="advanceVisible ? 'fa fa-angle-double-down' : 'fa fa-angle-double-up'"></i> 高级搜索
        </el-button>
      </div>
      <div class="tw-flex">
        <el-upload
            :action="api.employee+'import'" :show-file-list="false"
            :limit="1" class="tw-mr-2.5" accept=".xlsx , .xls"
            :before-upload="beforeUpload" :on-success="onSuccess" :on-error="onError"
            :disabled="importDisabled" :headers="headers"
        >
          <el-button type="success"><i :class="importIcon"></i>{{ importText }}</el-button>
        </el-upload>
        <el-button type="success" @click="exportData">
          <i class="fa fa-level-up"></i>导出数据
        </el-button>
        <el-button type="primary" icon="el-icon-plus" @click="addEmployeeVisible">添加员工</el-button>
      </div>
    </div>
    <transition
        enter-active-class="animate__animated animate__fadeIn"
        leave-active-class="animate__animated animate__fadeOut"
    >
      <div v-show="advanceVisible" class="tw-border tw-border-blue-300 tw-rounded-lg tw-box-border tw-p-1.5 tw-my-2">
        <el-row>
          <el-col :span="6" :offset="1">
            政治面貌：
            <el-select size="mini" style="width: 160px" v-model="searchValue.politicId" placeholder="政治面貌">
              <el-option
                  v-for="item in politicsStatus"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            民族：
            <el-select size="mini" style="width: 160px" v-model="searchValue.nationId" placeholder="民族">
              <el-option
                  v-for="item in nations"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            职位：
            <el-select size="mini" style="width: 160px" v-model="searchValue.posId" placeholder="职位">
              <el-option
                  v-for="item in positions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="5">
            职称：
            <el-select size="mini" style="width: 160px" v-model="searchValue.jobLevelId" placeholder="选择职称">
              <el-option
                  v-for="item in joblevels"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row class="tw-mt-3">
          <el-col :offset="1" :span="6">
            聘用形式：
            <el-radio-group v-model="searchValue.engageForm">
              <el-radio label="劳动合同">劳动合同</el-radio>
              <el-radio label="劳务合同">劳务合同</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="6">
            所属部门：
            <el-popover
                placement="bottom"
                title="所属部门"
                width="200"
                trigger="manual"
                v-model="deVisibleSearch">
              <el-tree
                  default-expand-all
                  :data="departments" :props="defaultProps"
                  @node-click="handleNodeClickSearch"></el-tree>
              <div slot="reference" style="width: 160px;display: inline-flex;border: 1px solid #dedede;
                                     height: 28px;border-radius: 5px;cursor: pointer;align-items: center;
                                     font-size: 13px;padding-left: 8px;box-sizing: border-box"
                   @click="deVisibleSearch=!deVisibleSearch">{{ inputDepNameSearch }}
              </div>
            </el-popover>
          </el-col>
          <el-col :span="11">
            入职日期：
            <el-date-picker
                size="mini"
                v-model="searchValue.beginDateScope"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
          </el-col>
        </el-row>
        <el-row class="tw-mt-3">
          <el-col :span="3" :offset="21">
            <el-button size="mini" @click="emptySearch">清空</el-button>
            <el-button size="mini" icon="el-icon-search" type="primary" @click="initEmployees('advance')">搜索</el-button>
          </el-col>
        </el-row>
      </div>
    </transition>
    <div class="tw-mt-2">
      <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          :data="employees"
          stripe
          border
          style="width: 100%">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            align="left"
            width="90"
            fixed>
        </el-table-column>
        <el-table-column
            prop="workID"
            label="工号"
            align="left"
            width="85">
        </el-table-column>
        <el-table-column
            prop="gender"
            label="性别"
            align="left"
            width="85">
        </el-table-column>
        <el-table-column
            prop="birthday"
            label="出生日期"
            align="left"
            width="95">
        </el-table-column>
        <el-table-column
            prop="idCard"
            label="身份证号"
            align="left"
            width="150">
        </el-table-column>
        <el-table-column
            prop="wedlock"
            label="婚姻状况"
            align="left"
            width="75">
        </el-table-column>
        <el-table-column
            prop="nation.name"
            label="民族"
            align="left"
            width="50">
        </el-table-column>
        <el-table-column
            prop="nativePlace"
            label="籍贯"
            align="left"
            width="100">
        </el-table-column>
        <el-table-column
            prop="politicsStatus.name"
            label="政治面貌"
            align="left"
            width="130">
        </el-table-column>
        <el-table-column
            prop="email"
            label="电子邮件"
            align="left"
            width="170">
        </el-table-column>
        <el-table-column
            prop="phone"
            label="电话号码"
            align="left"
            width="100">
        </el-table-column>
        <el-table-column
            prop="address"
            label="联系地址"
            align="left"
            width="300">
        </el-table-column>
        <el-table-column
            prop="department.name"
            label="所属部门"
            align="left"
            width="100">
        </el-table-column>
        <el-table-column
            prop="position.name"
            label="职位"
            width="100">
        </el-table-column>
        <el-table-column
            prop="engageForm"
            label="聘用形式"
            align="left"
            width="85">
        </el-table-column>
        <el-table-column
            prop="tiptopDegree"
            label="最高学历"
            align="left"
            width="85">
        </el-table-column>
        <el-table-column
            prop="joblevel.name"
            label="职称"
            align="left"
            width="85">
        </el-table-column>
        <el-table-column
            prop="school"
            label="毕业院校"
            align="left"
            width="150">
        </el-table-column>
        <el-table-column
            prop="specialty"
            label="专业"
            align="left"
            width="150">
        </el-table-column>
        <el-table-column
            prop="workState"
            label="在职状态"
            align="left"
            width="85">
        </el-table-column>
        <el-table-column
            prop="beginDate"
            label="入职日期"
            align="left"
            width="95">
        </el-table-column>
        <el-table-column
            prop="conversionTime"
            label="转正日期"
            align="left"
            width="95">
        </el-table-column>
        <el-table-column
            prop="beginContract"
            label="合同起始日期"
            align="left"
            width="95">
        </el-table-column>
        <el-table-column
            prop="endContract"
            label="合同截止日期"
            align="left"
            width="95">
        </el-table-column>
        <el-table-column
            label="合同期限"
            align="left"
            width="95">
          <template slot-scope="scope">
            <el-tag>{{ scope.row.contractTerm }}年</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            width="200"
            fixed="right">
          <template slot-scope="scope">
            <el-button style="padding: 3px" @click="showEditEmpView(scope.row)">编辑</el-button>
            <!--            <el-button style="padding: 3px" type="primary">查看高级资料</el-button>-->
            <el-button style="padding: 3px" type="danger" @click="deleteEmp(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="tw-flex tw-justify-center">
      <el-pagination
          @size-change="handleSizeChange"
          :current-page="page.currentPage"
          :page-sizes="[10, 20, 30 , 50 , 100]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          :total="page.total">
      </el-pagination>
    </div>

    <!--  添加员工对话框  -->
    <el-dialog
        title="添加员工"
        :visible.sync="dialogVisible"
        width="80%">
      <div>
        <el-form ref="empForm" :model="emp" :rules="rules">
          <el-row>
            <el-col :span="6">
              <el-form-item label="姓名：" prop="name">
                <el-input size="mini" style="width: 160px"
                          prefix-icon="el-icon-edit"
                          v-model="emp.name" placeholder="请输入员工姓名">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="性别：" prop="gender">
                <el-radio-group v-model="emp.gender">
                  <el-radio label="男">男</el-radio>
                  <el-radio label="女">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="出生日期：" prop="birthday">
                <el-date-picker
                    v-model="emp.birthday"
                    type="date"
                    size="mini"
                    style="width: 160px"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="政治面貌：" prop="politicId">
                <el-select size="mini" style="width: 160px" v-model="emp.politicId" placeholder="政治面貌">
                  <el-option
                      v-for="item in politicsStatus"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="民族：" prop="nationId">
                <el-select size="mini" style="width: 160px" v-model="emp.nationId" placeholder="民族">
                  <el-option
                      v-for="item in nations"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="籍贯：" prop="nativePlace">
                <el-input v-model="emp.nativePlace"
                          placeholder="请输入籍贯"
                          prefix-icon="el-icon-edit" size="mini"
                          style="width: 160px">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="电子邮件：" prop="email">
                <el-input v-model="emp.email"
                          placeholder="请输入电子邮件"
                          prefix-icon="el-icon-message" size="mini"
                          style="width: 160px">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="电话号码：" prop="phone">
                <el-input v-model="emp.phone"
                          placeholder="请输入电话"
                          prefix-icon="el-icon-phone" size="mini"
                          style="width: 160px">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="地址：" prop="address">
                <el-input v-model="emp.address"
                          placeholder="请输入地址"
                          prefix-icon="el-icon-edit" size="mini"
                          style="width: 160px">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="职位：" prop="posId">
                <el-select size="mini" style="width: 160px" v-model="emp.posId" placeholder="职位">
                  <el-option
                      v-for="item in positions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="身份证号：" prop="idCard">
                <el-input v-model="emp.idCard"
                          placeholder="请输入身份证号"
                          prefix-icon="el-icon-edit" size="mini"
                          style="width: 160px">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="所属部门：" prop="departmentId">
                <el-popover
                    placement="bottom"
                    title="所属部门"
                    width="200"
                    trigger="manual"
                    v-model="deVisible">
                  <el-tree
                      default-expand-all
                      :data="departments" :props="defaultProps"
                      @node-click="handleNodeClick"></el-tree>
                  <div slot="reference" style="width: 160px;display: inline-flex;border: 1px solid #dedede;
                                     height: 28px;border-radius: 5px;cursor: pointer;align-items: center;
                                     font-size: 13px;padding-left: 8px;box-sizing: border-box"
                       @click="deVisible=!deVisible">{{ inputDepName }}
                  </div>
                </el-popover>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="专业：" prop="specialty">
                <el-input v-model="emp.specialty"
                          placeholder="请输入专业"
                          prefix-icon="el-icon-edit" size="mini"
                          style="width: 160px">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="职称：" prop="jobLevelId">
                <el-select size="mini" style="width: 160px" v-model="emp.jobLevelId" placeholder="选择职称">
                  <el-option
                      v-for="item in joblevels"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="最高学历：" prop="tiptopDegree">
                <el-select size="mini" style="width: 160px" v-model="emp.tiptopDegree" placeholder="最高学历">
                  <el-option
                      v-for="item in tiptopDegree"
                      :key="item"
                      :label="item"
                      :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="婚姻状况：" prop="wedlock">
                <el-radio-group v-model="emp.wedlock">
                  <el-radio label="已婚">已婚</el-radio>
                  <el-radio label="未婚">未婚</el-radio>
                  <el-radio label="离异">离异</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="工号：" prop="workID">
                <el-input v-model="emp.workID"
                          disabled
                          placeholder="请输入工号"
                          prefix-icon="el-icon-edit" size="mini"
                          style="width: 160px">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="转正日期：" prop="conversionTime">
                <el-date-picker
                    v-model="emp.conversionTime"
                    type="date"
                    size="mini"
                    style="width: 133px"
                    value-format="yyyy-MM-dd"
                    placeholder="转正日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="毕业院校：" prop="school">
                <el-input v-model="emp.school"
                          placeholder="请输入毕业院校"
                          prefix-icon="el-icon-edit" size="mini"
                          style="width: 160px">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="聘用形式：" prop="engageForm">
                <el-radio-group v-model="emp.engageForm">
                  <el-radio label="劳动合同">劳动合同</el-radio>
                  <el-radio label="劳务合同">劳务合同</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="入职日期：" prop="beginDate">
                <el-date-picker
                    v-model="emp.beginDate"
                    type="date"
                    size="mini"
                    style="width: 133px"
                    value-format="yyyy-MM-dd"
                    placeholder="入职日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同起始日期：" prop="beginContract">
                <el-date-picker
                    v-model="emp.beginContract"
                    type="date"
                    size="mini"
                    style="width: 160px"
                    value-format="yyyy-MM-dd"
                    placeholder="合同起始日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同截止日期：" prop="endContract">
                <el-date-picker
                    v-model="emp.endContract"
                    type="date"
                    size="mini"
                    style="width: 160px"
                    value-format="yyyy-MM-dd"
                    placeholder="合同截止日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addEmployee">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "basic",
  methods: {
    emptySearch() {
      this.searchValue={
        politicId:null,
        nationId:null,
        posId:null,
        jobLevelId:null,
        engageForm:'',
        departmentId:null,
        beginDateScope:null
      }
      this.inputDepNameSearch="请选择部门"
      this.initEmployees()
    },
    onError() {
      this.importIcon = "el-icon-close"
      this.importText = "导入失败"
      this.importDisabled = false
    },
    onSuccess() {
      this.importIcon = "fa fa-level-down"
      this.importText = "导入数据"
      this.importDisabled = false
      this.initEmployees()
    },
    beforeUpload() {
      this.importIcon = "el-icon-loading"
      this.importText = "正在导入"
      this.importDisabled = true
    },
    exportData() {
      this.downloadRequest(this.api.employee + "/export");
    },
    showEditEmpView(employee) {
      this.dialogVisible = true
      this.emp = employee
    },
    addEmployeeVisible() {
      //获取工号
      this.getRequest(this.api.employee + "maxWorkID").then(res => {
        this.emp.workID = res.data.obj
        this.emp = this.addEmp
        this.dialogVisible = true
      })
    },
    handleNodeClick(data) {
      this.inputDepName = data.name
      this.deVisible = false
      this.emp.departmentId = data.id
    },
    handleNodeClickSearch(data){
      this.inputDepNameSearch = data.name
      this.deVisibleSearch = false
      this.searchValue.departmentId = data.id
    },
    initData() {
      // 政治面貌
      let politicsStatus = sessionStorage.getItem("politicsStatus");
      if (politicsStatus) {
        this.politicsStatus = JSON.parse(politicsStatus);
      } else {
        this.getRequest(this.api.employee + "politicsStatus").then(res => {
          this.politicsStatus = res.data
          sessionStorage.setItem("politicsStatus", JSON.stringify(res.data))
        })
      }
      // 民族
      let nations = sessionStorage.getItem("nations");
      if (nations) {
        this.nations = JSON.parse(nations);
      } else {
        this.getRequest(this.api.employee + "nations").then(res => {
          this.nations = res.data
          sessionStorage.setItem("nations", JSON.stringify(res.data))
        })
      }
      //职位
      let positions = sessionStorage.getItem("positions");
      if (positions) {
        this.positions = JSON.parse(positions);
      } else {
        this.getRequest(this.api.employee + "positions").then(res => {
          this.positions = res.data
          sessionStorage.setItem("positions", JSON.stringify(res.data))
        })
      }
      //部门
      let departments = sessionStorage.getItem("departments");
      if (departments) {
        this.departments = JSON.parse(departments);
      } else {
        this.getRequest(this.api.employee + "departments").then(res => {
          this.departments = res.data
          sessionStorage.setItem("departments", JSON.stringify(res.data))
        })
      }
      //职称
      let joblevels = sessionStorage.getItem("joblevels");
      if (joblevels) {
        this.joblevels = JSON.parse(joblevels);
      } else {
        this.getRequest(this.api.employee + "joblevels").then(res => {
          this.joblevels = res.data
          sessionStorage.setItem("joblevels", JSON.stringify(res.data))
        })
      }
    },
    addEmployee() {
      if (this.emp.id) {
        this.$refs['empForm'].validate((valid) => {
          if (valid) {
            this.putRequest(this.api.employee, this.emp).then(res => {
              if (res) {
                this.dialogVisible = false
                this.initEmployees()
              }
            })
          }
        });
      } else {
        this.$refs['empForm'].validate((valid) => {
          if (valid) {
            this.postRequest(this.api.employee, this.emp).then(res => {
              if (res) {
                this.dialogVisible = false
                this.initEmployees()
              }
            })
          }
        });
      }
    },
    deleteEmp(emp) {
      this.commonUtil.oneConfirmDialog(emp.name, (res => {
        this.deleteRequest(this.api.employee + emp.id).then(res => {
          if (res) {
            this.initEmployees()
          }
        })
      }), "员工")
    },
    search() {
      if (this.emName === '') this.initEmployees()
    },
    handleSizeChange(val) {
      this.page.size = val
      this.initEmployees()
    },
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.initEmployees()
    },
    initEmployees(type) {
      let url = this.api.employee + `?currentPage=${this.page.currentPage}&size=${this.page.size}&name=${this.emName}`
      if (type === 'advance'){
        if (this.searchValue.politicId !== null){
          url+='&politicId='+this.searchValue.politicId
        }
        if (this.searchValue.nationId !== null){
          url+='&nationId='+this.searchValue.nationId
        }
        if (this.searchValue.posId !== null){
          url+='&posId='+this.searchValue.posId
        }
        if (this.searchValue.jobLevelId !== null){
          url+='&jobLevelId='+this.searchValue.jobLevelId
        }
        if (this.searchValue.engageForm !== ''){
          url+='&engageForm='+this.searchValue.engageForm
        }
        if (this.searchValue.departmentId !== null){
          url+='&departmentId='+this.searchValue.departmentId
        }
        if (this.searchValue.beginDateScope !== null){
          url+='&beginDateScope='+this.searchValue.beginDateScope[0]
          url+='&beginDateScope='+this.searchValue.beginDateScope[1]
        }
      }
      this.loading = true
      this.getRequest(url).then(res => {
            if (res) {
              this.employees = res.data.data
              this.page.total = res.data.total
              this.loading = false
            }
          })
    }
  },
  data() {
    return {
      searchValue: {
        politicId:null,
        nationId:null,
        posId:null,
        jobLevelId:null,
        engageForm:'',
        departmentId:null,
        beginDateScope:null
      },
      advanceVisible: false,
      headers: {
        Authorization: sessionStorage.getItem("token_login")
      },
      importDisabled: false,
      importText: "导入数据",
      importIcon: "fa fa-level-down",
      rules: {
        name: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        gender: [{required: true, message: '请输入员工性别', trigger: 'blur'}],
        birthday: [{required: true, message: '请输入出生日期', trigger: 'blur'}],
        idCard: [{required: true, message: '请输入身份证号', trigger: 'blur'}],
        wedlock: [{required: true, message: '请输入婚姻状态', trigger: 'blur'}],
        nationId: [{required: true, message: '请输入民族', trigger: 'blur'}],
        nativePlace: [{required: true, message: '请输入籍贯', trigger: 'blur'}],
        politicId: [{required: true, message: '请输入政治面貌', trigger: 'blur'}],
        email: [{required: true, message: '请输入邮箱', trigger: 'blur'},
          {type: 'email', message: '邮箱格式不正确', trigger: 'blur'}],
        phone: [{required: true, message: '请输入电话号码', trigger: 'blur'}],
        address: [{required: true, message: '请输入员工地址', trigger: 'blur'}],
        departmentId: [{required: true, message: '请输入部门名称', trigger: 'blur'}],
        jobLevelId: [{required: true, message: '请输入职称', trigger: 'blur'}],
        posId: [{required: true, message: '请输入职位', trigger: 'blur'}],
        engageForm: [{required: true, message: '请输入聘用形式', trigger: 'blur'}],
        tiptopDegree: [{required: true, message: '请输入学历', trigger: 'blur'}],
        specialty: [{required: true, message: '请输入专业', trigger: 'blur'}],
        school: [{required: true, message: '请输入毕业院校', trigger: 'blur'}],
        beginDate: [{required: true, message: '请输入入职日期', trigger: 'blur'}],
        workState: [{required: true, message: '请输入工作状态', trigger: 'blur'}],
        workID: [{required: true, message: '请输入工号', trigger: 'blur'}],
        contractTerm: [{required: true, message: '请输入合同期限', trigger: 'blur'}],
        conversionTime: [{required: true, message: '请输入转正日期', trigger: 'blur'}],
        notWorkDate: [{required: true, message: '请输入离职日期', trigger: 'blur'}],
        beginContract: [{required: true, message: '请输入合同起始日期', trigger: 'blur'}],
        endContract: [{required: true, message: '请输入合同截止日期', trigger: 'blur'}],
        workAge: [{required: true, message: '请输入工龄', trigger: 'blur'}],
      },
      page: {
        total: 0,
        currentPage: 1,
        size: 10
      },
      deVisible: false,
      deVisibleSearch:false,
      dialogVisible: false,
      loading: false,
      emName: '',
      inputDepName: "请选择部门",
      inputDepNameSearch:"请选择部门",
      employees: [],
      nations: [],
      positions: [],
      departments: [],
      politicsStatus: [],
      joblevels: [],
      tiptopDegree: ['博士', '硕士', '本科', '大专', '高中', '初中', '小学', '其他'],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      addEmp: {
        "name": "",
        "gender": "男",
        "birthday": "",
        "idCard": "",
        "wedlock": "未婚",
        "nationId": null,
        "nativePlace": "",
        "politicId": null,
        "email": "",
        "phone": "",
        "address": "",
        "departmentId": null,
        "jobLevelId": null,
        "posId": null,
        "engageForm": "劳动合同",
        "tiptopDegree": "",
        "specialty": "",
        "school": "",
        "beginDate": "",
        "workID": "",
        "conversionTime": "",
        "beginContract": "",
        "endContract": "",
      },
      emp: {
        "name": "",
        "gender": "男",
        "birthday": "",
        "idCard": "",
        "wedlock": "未婚",
        "nationId": null,
        "nativePlace": "",
        "politicId": null,
        "email": "",
        "phone": "",
        "address": "",
        "departmentId": null,
        "jobLevelId": null,
        "posId": null,
        "engageForm": "劳动合同",
        "tiptopDegree": "",
        "specialty": "",
        "school": "",
        "beginDate": "",
        "workID": "",
        "conversionTime": "",
        "beginContract": "",
        "endContract": "",
      }
    }
  },
  mounted() {
    this.initEmployees()
    this.initData()
  }
}
</script>

<style scoped>
</style>